<script>
  export default {
    data(){
      return{
        message:'头部组件'
      }
    },
    mounted() {
      setTimeout(()=>{
        this.message = 'hi vue';

        //× 只能获取到的是上一次的值"头部组件"
        console.log(this.$refs.elem.innerHTML)

        this.$nextTick().then(()=>{
          console.log("$nextTick:" + this.$refs.elem.innerHTML)
        })
      },2000)
    },
    updated() {
      //获取到是更新之后的值"hi vue"
      console.log("updated:" + this.$refs.elem.innerHTML)

    }
  }

</script>

<template>
  <div>
    <h2>hello nextTick</h2>
    <div ref="elem">{{message}}</div>
  </div>
</template>

<style scoped>

</style>